<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../lib/element-ui/index.css" />
    
    <script src="../common/util.js"></script>
    <script src="../../lib/bigscreen/js/vue.min.js"></script>
    <script src="../../lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../lib/layer/layer.js"></script>
    <script src="../../lib/element-ui/index.js"></script>
    <style type="text/css">
    	[v-cloak]{
		    display: none;
		}
		
		html{
			background: #fff;
		}
		#app{
			padding: 2px;
		}
		.el-form{
			
		}
		.el-form-item{
			margin-bottom: 0;
		}
		.search{
		}
		
		.el-table{
			margin-top: 10px;
		}
		
		.video-container{
			display: flex ;
			align-items: center ;
			padding: 10px;
		    border: 1px solid #e9e9e9;
		    border-radius: 3px;
		    margin-bottom: 10px;
		}
		
		.video-container:HOVER{
			background: #efefef;
			cursor: pointer;
		}
		
		.el-avatar{
			background: transparent;
		}
		
		.self-width{
			width: 400px !important ;
		}
    </style>
	<title>报警图片</title>
</head>
<body>
	<div id="app" v-cloak >
		<div class="search">
			<el-form :inline="true" :model="param" class="demo-form-inline">
			    <div class="block" style="overflow: hidden;" >
			    	 <el-date-picker size="small"  style="float:left;width:40%;"
				      v-model="param.start_time"
				      type="date"
				      placeholder="开始日期">
    				</el-date-picker>
    				
    				<span style="padding: 0 20px;float: left;"> ~ </span>
    				
    				<el-date-picker size="small"  style="float:left;width:40%;"
				      v-model="param.end_time"
				      type="date"
				      placeholder="结束日期">
    				</el-date-picker>
			    </div>
			  
			  <div class="block" style="text-align: right;margin-top: 10px;margin-right: 5%;">
			    <el-button type="primary" size="mini" @click="onSubmit">查询</el-button>
			    <el-button type="info" size="mini" @click="onReturn">返回</el-button>
			  </div>
			</el-form>			
		</div>
		<div style="margin:10px 0;">
			<el-table :data="videoImgData" style="width: 100%"  >
    			<el-table-column type="index" label="序号" width="50"></el-table-column>
    			<el-table-column prop="atime" label="数据时间" >
    				 <template slot-scope="scope">
				        <i class="el-icon-time"></i>
				        <span style="margin-left: 10px">{{ timeStamp2String(scope.row.atime , 'yy/MM/dd hh:mm:ss') }}</span>
				      </template>
    			</el-table-column>
    			<el-table-column prop="url" label="报警图片" width="100" @click="download( '/res' + url )" >
    				<template slot-scope="scope">
				        <el-avatar shape="square" :size="40" :src=" '/res' + scope.row.url"></el-avatar>
				      </template>
    			</el-table-column>
  			</el-table>
		</div>
		<el-pagination
			  background
			  :hide-on-single-page="page_value"
			  layout="prev, pager, next"
			  :page-size="pageform.pageSize"
			  @current-change="changePage"
			  :total="pageform.totalCount">
			</el-pagination>
	</div>
	
	<script type="text/javascript">
		var app = new Vue({
			el: '#app' ,
			data: function(){
				return {
					param: {
						
					} ,  	  		// 表单
					videoImgData: [] ,	  	// 摄像头信息
					page_value: true , 		// 页面隐藏
					pageform:{				//分页参数
						pageSize:10,
						totalCount:0,  
						page:1, 
					},
				}
			},
			methods: {
				initVideoImgInfo(data){
					// 查询图片
					commonAjax('POST',baseurl+"/service/page/video/file?paged="+ this.pageform.page +"&pageSize=" + this.pageform.pageSize , data ,function(res){
						if(isOk(res)){
							var dt = res.data.data ;
							app.videoImgData = dt ;
							app.pageform.totalCount = res.data.totalCount;
							if( res.data.totalCount > app.pageform.pageSize ){
								app.page_value = false ;
							}
						}else{
							app.page_value = true ;
							app.videoImgData = [] ;
						}
					});
				},
				onSubmit(){
					// 查询
					this.initVideoImgInfo({ video_id: getQueryString('videoId')  ,
						start_time: this.param.start_time ,
						end_time: this.param.end_time
					}) ;
				},
				changePage(page){
					this.pageform.page = page;
					this.onSubmit();
				},
				download( url ){
					window.open( url ) ;
				},
				onReturn(){
					window.location.href = baseurl + "/service/wiot/live?id="+ getQueryString('videoId') +"&sid=1" ;
				}
			},
			created(){
				
			},
			mounted(){
				this.initVideoImgInfo({ video_id: getQueryString('videoId') , start_time: timeStamp2String(new Date(new Date().getTime() - 5*24*3600*1000 )) }) ;
			}
		});
	</script>
</body>